Event Listener হল একটি ফাংশন যা ইভেন্টটি ট্রিগার হওয়া পর্যন্ত অপেক্ষা করে এবং তারপর সেই ইভেন্টের প্রতিক্রিয়া হিসেবে নির্দিষ্ট কাজটি সম্পাদন করে। JavaScript এবং Node.js এ ইভেন্ট লিসেনার ব্যবহৃত হয়, যেখানে কোন ইভেন্ট (যেমন ক্লিক, মাউস মুভ, কী প্রেস, ডাটা রিসিভ করা ইত্যাদি) ঘটলে নির্দিষ্ট ফাংশনটি কার্যকর হয়।
Node.js এ, EventEmitter ক্লাস ইভেন্ট এবং ইভেন্ট লিসেনার পরিচালনা করতে ব্যবহৃত হয়, যা মূলত Node.js এ সকল ইভেন্ট লজিকের ভিত্তি। আপনি EventEmitter ক্লাস ব্যবহার করে নিজস্ব ইভেন্ট তৈরি করতে পারেন এবং সেই ইভেন্টের জন্য লিসেনার বা হ্যান্ডলার সংযুক্ত করতে পারেন।
১. JavaScript এবং Node.js এ Event Listener যুক্ত করা
JavaScript (Client-Side) এ Event Listener
ব্রাউজারে JavaScript দিয়ে ইভেন্ট লিসেনার যুক্ত করার জন্য, আপনি addEventListener() মেথড ব্যবহার করেন। এটি একাধিক ইভেন্ট টাইপ যেমন click, mouseover, keydown ইত্যাদির জন্য কার্যকর।
উদাহরণ ১: click ইভেন্ট লিসেনার
// বাটনে ক্লিক ইভেন্ট লিসেনার
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked!');
});এখানে, addEventListener() মেথডটি myButton আইডির বাটনে click ইভেন্টের জন্য একটি লিসেনার যুক্ত করেছে। যখন বাটনে ক্লিক করা হবে, তখন কনসোলে 'Button clicked!' মেসেজটি প্রিন্ট হবে।
উদাহরণ ২: keydown ইভেন্ট লিসেনার
// কিবোর্ডে কী চাপা হলে ইভেন্ট লিসেনার
document.addEventListener('keydown', function(event) {
console.log(`Key pressed: ${event.key}`);
});এখানে, keydown ইভেন্টের জন্য একটি লিসেনার যুক্ত করা হয়েছে, যা কীবোর্ডের কী প্রেস ইভেন্টটি ধরবে এবং কীটি কনসোলে প্রিন্ট করবে।
২. Node.js এ Event Listener যুক্ত করা (EventEmitter)
Node.js এ ইভেন্ট ব্যবস্থাপনা EventEmitter ক্লাসের মাধ্যমে করা হয়। EventEmitter ব্যবহার করে আপনি নিজস্ব ইভেন্ট তৈরি করতে পারেন এবং সেই ইভেন্টের জন্য লিসেনার যোগ করতে পারেন।
১. EventEmitter ব্যবহার করা
EventEmitter হল একটি ক্লাস যা Node.js এর events মডিউল থেকে পাওয়া যায়। এই ক্লাস ব্যবহার করে আপনি ইভেন্ট তৈরি করতে এবং ইভেন্টের জন্য এক বা একাধিক লিসেনার যুক্ত করতে পারেন।
উদাহরণ ১: EventEmitter ইভেন্ট তৈরি এবং লিসেনার যোগ করা
const EventEmitter = require('events'); // EventEmitter ক্লাস ইমপোর্ট করা
class MyEmitter extends EventEmitter {} // MyEmitter নামক নতুন ক্লাস তৈরি করা
const myEmitter = new MyEmitter(); // MyEmitter এর একটি ইনস্ট্যান্স তৈরি
// 'event1' নামক ইভেন্টের জন্য লিসেনার যুক্ত করা
myEmitter.on('event1', () => {
console.log('event1 was triggered!');
});
// ইভেন্ট ট্রিগার করা
myEmitter.emit('event1'); // কনসোলে 'event1 was triggered!' প্রিন্ট হবেএখানে, MyEmitter ক্লাস EventEmitter ক্লাস থেকে ইনহেরিট করা হয়েছে। এরপর, 'event1' নামক একটি ইভেন্ট তৈরি করা হয়েছে এবং তার জন্য একটি লিসেনার যোগ করা হয়েছে। যখন emit() মেথড ব্যবহার করে 'event1' ট্রিগার করা হয়েছে, তখন লিসেনারটি কার্যকর হয় এবং কনসোলে মেসেজটি প্রিন্ট হয়।
২. একাধিক লিসেনার যুক্ত করা
একাধিক লিসেনার যুক্ত করা সম্ভব এবং যখনই ইভেন্টটি ট্রিগার হয়, তখন সকল লিসেনার একে একে কার্যকর হবে।
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
// একাধিক লিসেনার যোগ করা
myEmitter.on('event1', () => {
console.log('Listener 1: event1 triggered!');
});
myEmitter.on('event1', () => {
console.log('Listener 2: event1 triggered!');
});
// ইভেন্ট ট্রিগার করা
myEmitter.emit('event1');এখানে, দুটি লিসেনার 'event1' ইভেন্টে যোগ করা হয়েছে। যখন emit() মেথড ব্যবহার করে 'event1' ইভেন্ট ট্রিগার করা হয়েছে, তখন দুইটি লিসেনার একে একে কার্যকর হবে এবং কনসোলে দুটি মেসেজ প্রিন্ট হবে।
৩. once() মেথড ব্যবহার করে একবারের জন্য লিসেনার যোগ করা
যদি আপনি চান যে কোনো ইভেন্ট শুধুমাত্র একবার ট্রিগার হোক এবং তার পর আর কোনো লিসেনার চালানো না হোক, তাহলে once() মেথড ব্যবহার করতে হবে।
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
// একবারের জন্য লিসেনার যোগ করা
myEmitter.once('event1', () => {
console.log('This will run only once');
});
// ইভেন্ট ট্রিগার করা
myEmitter.emit('event1');
myEmitter.emit('event1'); // দ্বিতীয় বার ইভেন্টটি ট্রিগার হলে কিছু হবে নাএখানে, once() মেথডটি নিশ্চিত করবে যে 'event1' শুধুমাত্র একবারই ট্রিগার হবে এবং পরবর্তী ট্রিগারগুলোর জন্য কোনো কার্যকলাপ হবে না।
৩. Event Listener ম্যানেজমেন্ট
ইভেন্ট লিসেনার মুছে ফেলা
কখনও কখনও আপনাকে ইভেন্ট লিসেনার মুছে ফেলতে হতে পারে। Node.js এ removeListener() অথবা off() মেথড দিয়ে ইভেন্ট লিসেনার মুছে ফেলা যায়।
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
// লিসেনার যোগ করা
const listener = () => {
console.log('This is a listener for event1');
};
myEmitter.on('event1', listener);
// ইভেন্ট ট্রিগার করা
myEmitter.emit('event1');
// লিসেনার মুছে ফেলা
myEmitter.removeListener('event1', listener);
// ইভেন্ট ট্রিগার করা, কোনো আউটপুট হবে না
myEmitter.emit('event1');এখানে, removeListener() মেথডের মাধ্যমে 'event1' ইভেন্টের জন্য লিসেনারটি মুছে ফেলা হয়েছে। দ্বিতীয়বার emit() করলে কোনো আউটপুট হবে না কারণ লিসেনারটি আর কার্যকরী নয়।
সারাংশ
- Event Listener হল একটি ফাংশন যা একটি নির্দিষ্ট ইভেন্ট ঘটার পর কার্যকর হয়।
- JavaScript (Client-Side) এ
addEventListener()মেথড ব্যবহার করে DOM উপাদানের সাথে ইভেন্ট লিসেনার যোগ করা হয়। - Node.js এ,
EventEmitterক্লাস ব্যবহার করে কাস্টম ইভেন্ট এবং লিসেনার তৈরি করা যায়। - একাধিক লিসেনার যোগ করা, একবারের জন্য লিসেনার যুক্ত করা এবং লিসেনার মুছে ফেলা সবই সহজেই করা যায়
on(),once(), এবংremoveListener()মেথডের মাধ্যমে।
Read more
